$(function () {
    $("a").attr("href", "javascript:void(0)")
    $proId = location.search.split("?")[1].split("=")[1]
    //页面一加载就读取数据,渲染到页面上
    $.ajax({
        url: `http://127.0.0.1:8080/api/goodsinfo/${$proId}`,
        type: "get",
        dataType: "json"
    }).then((res) => {
        let resData = res[0]

        //上面商品名
        var proTitStr = `
            <p class="pos">当前位置： 多商网 > 时尚女装 > 裤子 > ${resData.p_name}</p>
            <p class="posTit">${resData.p_name}</p>
            <p>${resData.p_curPro}
                <span>${resData.p_ser}
                </span>
            </p>
        `
        $(".proTitLine").html(proTitStr)
        //左边放大镜
        let SacleLeStr = `
        <div class="imgBox">
            <img class="imgBI" src="${resData.p_middleImg[0]}" alt="">
            <div class="middleArea"></div>
        </div>
        <ul class="smallImg clear">
        `
        resData.p_smallImg.forEach((el, index) => {
            SacleLeStr += `
                <li><img src="${el}" alt=""></li>
            `
        });
        SacleLeStr += `
        </ul>
        <p>
            <img src="./images/赞.png" alt=""><span>0</span>
            <img src="./images/赞.png" alt=""><span>收藏</span>
            <img src="./images/jia.jpg" alt="">
            <img src="./images/weixin.png" alt="">
            <span> 分享到</span>
        </p>
        <div class="BigArea">
            <img class="bigImg" src="${resData.p_bigImg[0]}" alt="">
        </div>
        `
        $(".btL").html(SacleLeStr)

        //右边信息
        //包邮价格
        let countStr = `
        <p class="baoyou">包邮<span>(其他)</span></p>
        <div>
            <span> ≥1件</span>
            <p >￥<a class="corPrice">${resData.p_price}</a></p>
            <span>编辑</span>
        </div>
        `
        $(".count").html(countStr)
        //金额
        let blurStr = `
        <p>爆款指数</p>
        <img src=${resData.p_baokuan.img} alt="">
        <p><span>909</span>件成交</p>
        <p>建议零售价: <span>${resData.p_baokuan.referPrice}</span></p>
        <p>${resData.p_baokuan.proNum}<span>复制</span>
        <button>淘宝活动报名登记</button></p>
        <p>已上活动场次 ：<span>${resData.p_baokuan.totalNum}</span> 次</p>
        `
        $(".ciLine1").html(blurStr)
        //款式
        let whitStr = ``
        resData.p_color.forEach(el => {
            whitStr += `
            <span>${el}</span>
        `
        })

        $(".whit").html(whitStr)
        //大小
        let litBoxStr = ``
        resData.p_size.forEach((el, index) => {
            litBoxStr += `
            <p class="p${index + 1} pop">
                <span class="proSize">${el}</span>
                <a href=""></a>
                <span class="ptline">
                    <a class="minus" href="javascript:void(0)">-</a>
                    <input type="text" class="s-num" name="proNum" value="0">
                    <a class="add" href="javascript:void(0)">+</a>
                    <span class="cloNum">件</span>
                </span>
            </p>
        `
        });
        $(".litBox").html(litBoxStr)



    })


    $(window).load(function () {

        $(".smallImg").children("li").eq(0).addClass("current2");
        $(".whit").children("span").eq(0).addClass("current5")

        //导航栏切换
        $(".title").on("mouseenter", "li", function () {
            $(".current1").stop().animate({
                left: $(this).position().left,
                width: $(this).width()
            })
            $(".titCaIn").children(".dl").eq($(this).index()).show().siblings().hide()
        })
        $(".tilBig").on("mouseleave", function () {
            $(".current1").stop().animate({
                left: 0,
                width: 60
            })
            $(".titCaIn").children().hide()
        })

        //点击小图
        $(".smallImg").on("click", "li", function () {
            $(this).addClass("current2").siblings().removeClass("current2");
            $(".imgBox").children("img").attr("src", `./images/cartPro${$proId}Middle${$(this).index() + 1}.jpg`)
            $(".BigArea").children("img").attr("src", `./images/cartPro${$proId}Middle${$(this).index() + 1}.jpg`)
        })
        //比例=中图/大图=中区域/大区域
        //放大镜
        $(".imgBox").on("mouseenter", function () {
            console.log($(".BigArea"))
            $(".BigArea").show()
            $(".middleArea").show()
            let $scale = $(".imgBox").children("img").width() / $(".BigArea").children("img").width()
            $(".middleArea").width($scale * $(".imgBox").width())
            $(".middleArea").height($scale * $(".imgBox").width())

            $(this).on("mousemove", function (e) {
                let disX = e.pageX - $(".imgBox").offset().left;
                let disY = e.pageY - $(".imgBox").offset().top;
                let mX = disX - $(".middleArea").width() / 2;
                let mY = disY - $(".middleArea").height() / 2
                if (mX < 0) {
                    mX = 0
                }
                if (mY < 0) {
                    mY = 0
                }
                if (mX > ($(".imgBox").width() - $(".middleArea").width())) {
                    mX = $(".imgBox").width() - $(".middleArea").width()
                }
                if (mY > ($(".imgBox").height() - $(".middleArea").height())) {
                    mY = $(".imgBox").height() - $(".middleArea").height()
                }
                $(".middleArea").css({
                    left: mX,
                    top: mY
                })
                $(".BigArea").children("img").css({
                    left: -mX / $scale,
                    top: -mY / $scale
                })

            })


        }).on("mouseleave", function () {
            $(".BigArea").hide()
            $(".middleArea").hide()
        })

        //包邮邮费
        $(".baoyou").hover(function () {
            $(".slide").stop().slideDown()
        }, function () {
            $(".slide").hide()
            $(".slide").hover(function () {
                $(".slide").show()
            }, function () {
                $(".slide").stop().slideUp()
            })
        })


        //商品详情向上走
        $(window).on("scroll", function () {
            if ($(window).scrollTop() > $(".proCon").offset().top && $(window).scrollTop() < $(".content").height()) {
                $(".detailTit").css({
                    'position': "fixed",
                    top: 0,
                    left: "310px"
                })
                $(".toCart2").show()
                $(".detailCon").css({
                    marginTop: $(".detailTit").height()
                })
            } else {
                $(".detailCon").css({
                    marginTop: 0
                })
                $(".toCart2").hide()
                $(".detailTit").css({
                    'position': "static"
                })
            }
        })
        //点击商品详情切换TAB栏
        $(".titx").on("click", function () {
            $(".detailCon").children("li").eq($(this).index()).show().siblings().hide()
        })

        //点击购物车,进入购物车页面
        $(".cart").on("click", function () {
            window.location.href = "http://127.0.0.1:8080/carterContent.html"
        })

        //点击颜色
        $(".whit").on("click", "span", function () {
            $(this).addClass("current5").siblings().removeClass("current5")
        })

        //加数量
        $('.add').on("click", function () {
            let $proNum = $(this).parents(".ptline").find('[name="proNum"]').val()
            $proNum++
            if ($proNum >= 99) {
                $proNum = 99
            }
            $(this).parents(".ptline").find('[name="proNum"]').val($proNum)
        })
        $('.minus').on("click", function () {
            let $proNum = $(this).parents(".ptline").find('[name="proNum"]').val()
            $proNum--
            if ($proNum <= 0) {
                $proNum = 0
            }
            $(this).parents(".ptline").find('[name="proNum"]').val($proNum)
        })


        //飞入购物车
        $(".addToCa").on("click", function () {
            //克隆图片
            let $newImg = $(".imgBox").find("img").clone(true)
            //给图片添加位置
            $newImg.css({
                "position": 'absolute',
                left: $(".imgBox").offset().left,
                top: $(".imgBox").offset().top
            })
            $newImg.appendTo($("body"))
            //让图片动起来
            $newImg.animate({
                left: $('.cart').offset().left,
                top: $('.cart').offset().top,
                width: 0,
                height: 0,
                opacity: 0
            }, function () {
                //让图片消失
                $newImg.remove()
            })



            if ($(".litBox").text().length == 0) {
                let proInfoObj = {
                    uid: JSON.parse($.cookie("isLogin") || '[]').u_id,
                    pid: $proId,
                    cname: $(".posTit").text(),
                    cimg: $(".smallImg").children("li").eq(0).children().attr("src"),
                    cprice: $(".corPrice").text(),
                    csize: "",
                    ccolor: $(".current5").text(),
                    cnum: 1
                }
                //把图片加入购物车
                console.log(proInfoObj)

                $.ajax({
                    url: "http://127.0.0.1:8080/api/addCart",
                    data: proInfoObj,
                    type: "get"
                }).then((res) => {
                    layer.msg(res.msg)
                    console.log(res.msg)
                })

            } else {
                $(".proSize")
                //过滤不是0的size
                var $proObj = $('.s-num').map((index, el) => {
                    if ($(el).val() != 0) {
                        return {
                            num: $(el).val(),
                            size: $(el).parents(".pop").children(".proSize").text()
                        }
                    }
                })

                console.log($(".litBox").text())
                // if($()){

                // }
                let proInfoArr = []
                $proObj.each(function (index, el) {
                    let proInfoObj = {
                        uid: JSON.parse($.cookie("isLogin") || '[]').u_id,
                        pid: $proId,
                        cname: $(".posTit").text(),
                        cimg: $(".smallImg").children("li").eq(0).children().attr("src"),
                        cprice: $(".corPrice").text(),
                        csize: el.size,
                        ccolor: $(".current5").text(),
                        cnum: el.num
                    }
                    proInfoArr.push(proInfoObj)
                })
                console.log(proInfoArr)

                //把图片加入购物车
                proInfoArr.forEach(function (el) {
                    $.ajax({
                        url: "http://127.0.0.1:8080/api/addCart",
                        data: el,
                        type: "get"
                    }).then((res) => {
                        layer.msg(res.msg)
                        console.log(res.msg)
                    })
                })
            }
        })
    })



})